<template>
  <page-header-wrapper>
    <a-card>
      <a-row align="middle">
        <a-space class="table-operator">
          <a-button
            type="primary"
            style="margin-bottom: 0px;"
            @click="onEdit"
            icon="plus"
            >新建</a-button
          >
        </a-space>
      </a-row>
      <selfTable
        ref="tableList"
        size="default"
        row-key="id"
        :columns="columns"
        :data="loadData"
      >
        <template slot="addtime" slot-scope="addtime">
          {{ addtime | timeFormat }}
        </template>
        <a-space slot="action" slot-scope="text, template">
          <a-button size="small" title="编辑" @click="onEdit(template.id)"
            >编辑</a-button
          >
          <a-button size="small" title="删除" @click="onDelete(template.id)"
            >删除</a-button
          >
        </a-space>
      </selfTable>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { templateList, delTemplate } from "@/api/diy/diy";
import { selfTable } from "../Table/index.js";

const columns = [
  {
    title: "模板ID",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "名称",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "addtime",
    scopedSlots: { customRender: "addtime" },
    width: 20,
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 20,
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "DiyTemplate",
  components: {
    selfTable,
  },
  data() {
    return {
      columns: columns,
      loadData: (parameter) => {
        return templateList(parameter).then((res) => {
          return res.data;
        });
      },
    };
  },
  methods: {
    onEdit(id) {
      if (id > 0) {
        this.$router.push({ name: "DiyTemplateEdit", query: { id: id } });
      } else {
        this.$router.push({ name: "DiyTemplateEdit" });
      }
    },
    onDelete(id) {
      this.$confirm({
        title: "是否确认删除？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          const hide = this.$message.loading("删除中...");
          delTemplate({ id: id }).then((res) => {
            hide();
            if (res.code === 0) {
              this.refresh();
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          });
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.permission-form {
  >>> .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
</style>
